<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>三个J-家居网购</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="/assets/css/vendor/vendor.min.css"/>
    <link rel="stylesheet" href="/assets/css/plugins/plugins.min.css"/>
    <link rel="stylesheet" href="/assets/css/style.min.css"/>
    <script type="text/javascript" src="/script/jquery-3.6.0.min.js">
    </script>
    <script type="text/javascript">

        $(function () {
            //删除图标绑定事件
            $("a.delItem").click(function () {

                //确认弹窗
                return confirm("你确认删除?");

            })
            $("a.clearItem").click(function () {
                return confirm("你确认要删除购物车?");
            })

            $(".cart-plus-minus").each(function() { // 遍历每个cart-plus-minus容器
                var $container = $(this); // 当前cart-plus-minus容器
                var $furnIdInput = $container.find('#furnIdInput'); // 获取家具ID的input
                var furnId = $furnIdInput.val(); // 获取家具ID（这里假设它已经被加载到DOM中）

                // 在当前容器内添加加减按钮
                $container.prepend('<div class="dec qtybutton">-</div>');
                $container.append('<div class="inc qtybutton">+</div>');

                // 为加减按钮绑定点击事件
                $container.find('.qtybutton').on("click", function() {
                    var $button = $(this);
                    var $input = $container.find('.cart-plus-minus-box'); // 获取数量的input
                    var oldValue = parseFloat($input.val()) || 1; // 确保值是一个数字，如果不是则默认为1

                    var newVal;

                    if ($button.hasClass('inc')) {
                        newVal = oldValue + 1;
                    } else {
                        if (oldValue > 1) {
                            newVal = oldValue - 1;
                        } else {
                            newVal = 1;
                        }
                    }

                    // 更新数量的input值
                    $input.val(newVal);

                    location.href = "/myCart1/updateCart?count=" + newVal + "&id=" + furnId;
                });
            });
        })
    </script>

<!--location.href = "/myCart1/updateCart?count=" + newVal + "&id=" + furnId;-->
</head>

<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="/member/index"><img src="/assets/images/logo/logo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->
                <!-- Header Action Start -->
                <div class="col align-self-center">
                    <div class="header-actions">
                        <div class="header-bottom-set dropdown">
                            <a th:text="'欢迎：' + ${session.username}"></a>
                        </div>
                        <div class="header-bottom-set dropdown">
                            <a th:href="@{/order/toOrder}" href="#">订单管理</a>
                        </div>
                        <div class="header-bottom-set dropdown">
                            <a href="#">安全退出</a>
                        </div>
                    </div>
                </div>
                <!-- Header Action End -->
            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img width="280px" src="/assets/images/logo/logo.png"
                                                  alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%;height: 50px;background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->

<!-- OffCanvas Cart Start -->

<!-- OffCanvas Cart End -->

<!-- OffCanvas Menu Start -->

<!-- OffCanvas Menu End -->


<!-- breadcrumb-area start -->


<!-- breadcrumb-area end -->

<!-- Cart Area Start -->
<div class="cart-main-area pt-100px pb-100px">
    <div class="container">
        <h3 class="cart-page-title">Your cart items</h3>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <form action="#">
                    <div class="table-content table-responsive cart-table-content">
                        <table>
                            <thead>
                            <tr>
                                <th>图片</th>
                                <th>家居名</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr th:each="furn : ${session.cart.items}">
                                <td class="product-thumbnail">
                                    <a href="#"><img class="img-responsive ml-3" src="/assets/images/product-image/1.jpg"
                                                     alt=""/></a>
                                </td>
                                <td class="product-name" th:text="${furn.getValue().name}"><a href="#" >Product Name</a></td>
                                <td class="product-price-cart"th:text="${furn.getValue().price}"><span class="amount">$60.00</span></td>
                                <td class="product-quantity" >
                                    <div class="cart-plus-minus">
                                        <input type="hidden" name="furnId" id="furnIdInput" th:value="${session.FID}" />
                                        <input  class="cart-plus-minus-box"  type="text" name="qtybutton" value="1" th:value="${furn.getValue().count}"/>
                                    </div>
                                </td>
                                <td class="product-subtotal"th:text="${furn.getValue().count*furn.getValue().price}">$70.00</td>
                                <td class="product-remove">
                                    <a class="delItem" th:href="@{/myCart1/deleteCart1(id=${furn.getKey()})}"><i class="icon-close"></i></a>
                                </td>D
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="cart-shiping-update-wrapper">
                                <h4 th:text="|共${session.cart?.getTotalCount()?:0}件商品 总价 ${session.CartTotalPrice?:'0'}元|"></h4>
                                <div class="cart-shiping-update">
                                    <a th:href="@{/order/toOrder}" href="#">购 物 车 -生成订单</a>
                                </div>
                                <div class="cart-clear">
                                    <a th:href="@{/member/index}">继 续 购 物</a>
                                    <a href="/myCart1/deleteCart">清 空 购 物 车</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
<!-- Cart Area End -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px" data-aos="fade-up"
                         data-aos-delay="400">
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="about.html">关于我们</a></li>
                                        <li class="li"><a class="single-link" href="#">交货信息</a></li>
                                        <li class="li"><a class="single-link" href="privacy-policy.html">隐私与政策</a></li>
                                        <li class="li"><a class="single-link" href="#">条款和条件</a></li>
                                        <li class="li"><a class="single-link" href="#">制造</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px" data-aos="fade-up" data-aos-delay="600">
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="my-account.html">我的账号</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="cart.html">我的购物车</a></li>
                                        <li class="li"><a class="single-link" href="login.html">登录</a></li>
                                        <li class="li"><a class="single-link" href="wishlist.html">感兴趣的</a></li>
                                        <li class="li"><a class="single-link" href="checkout.html">结账</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="800">

                    </div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <img src="#" alt="">
                        </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <p class="copy-text">Copyright &copy; 2021 三个J~</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="/assets/js/vendor/vendor.min.js"></script>
<script src="/assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="/assets/js/main.js"></script>
</body>
</html>